<template>
  <page-frame>
    <div class="member-retired">
      <div class="toptitle">
        <div class="left">会员换床</div>
        <div class="right">
          <div class="btns">
            <el-button  @click="changeBedApplication" class="lightGreenBtn">换床申请</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="file-main">
        <div class="input">
          <el-row>
            <el-col style="width: 130px;">
              <div class="input-item">
                <el-select style="width:90%!important;" v-model="currentFileId" @change="selectItem" @clear="clearItem" clearable placeholder="请选择项目">
                  <el-option
                    v-for="item in fileList"
                    :label="item.fileName"
                    :value="item.fileId">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="input-item" v-show="currentFileId=='1'">
                <el-input v-model="queryData.memberName" @keyup.enter.native="query" placeholder="请选择会员姓名">
                </el-input>
              </div>
              <div class="input-item" v-show="currentFileId=='2'">
                <el-date-picker
                  v-model="queryData.dateApplication"
                  type="daterange"
                  @change="query"
                  placeholder="请选择申请时间">
                </el-date-picker>
              </div>
              <div class="input-item" v-show="currentFileId=='3'">
                <el-select v-model="queryData.taskKey" @change="query" placeholder="请选择办理进度">
                  <el-option
                    v-for="(key,val) in taskKeys"
                    :label="key"
                    :value="val">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="2">
                <el-button class="query lightGreenBtn" @click="query">搜索</el-button>
            </el-col>
          </el-row>
        </div>

        <div class="tabs">
          <el-table
            :data="tableData"
            border
            highlight-current-row
            @cell-dblclick="getScheduleData"
            style="width: 100%">
            <el-table-column
              prop="memberName"
              label="会员姓名"
            >
            </el-table-column>
            <el-table-column
              prop="gender"
              label="性别"
            >
            </el-table-column>
            <el-table-column
              prop="dateApplication"
              label="申请时间"
            >
            </el-table-column>
            <el-table-column
              prop="taskName"
              label="办理进度"
            >
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
            >
            </el-table-column>
            <el-table-column
              prop="operating"
              label="操作"
              width="150"
            >
              <template scope="scope">
                <el-button type="text" v-if="scope.row.taskIdArr.length!=0" size="small" @click.stop="goOn(scope.row)">继续</el-button>
                <el-button type="text" v-if="scope.row.taskIdArr.length!=0" size="small" @click.stop="stopBtn(scope.row)">中止</el-button>
                <el-button type="text" size="small" @click.stop="remark(scope.row)">备注</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!--换床进度-->
          <el-dialog title="换床进度表" v-model="schedule" size="tiny" :close-on-click-modal="false">
            <el-steps :space="80" direction="vertical" active="50">
              <el-step  v-for="(key,value) in scheduleData" :title="value" :description="key"></el-step>
            </el-steps>
          </el-dialog>

          <!--备注弹框-->
          <el-dialog title="备注" :visible.sync="noteBox" size="tiny" :close-on-click-modal="false">
            <div class="input-item">
              <label style="vertical-align: top">备注内容:</label>
              <el-input v-model="comment" type="textarea" :rows="2" style="width: 80%!important;"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="noteBox = false">取 消</el-button>
              <el-button type="primary" @click="noteQuery">确 定</el-button>
            </span>
          </el-dialog>
          <!--中止原因-->
          <el-dialog title="中止进程" :visible.sync="stopRefusal" size="tiny" :close-on-click-modal="false">
            <el-form>
              <el-form-item label="中止原因">
                <el-col :span="20">
                  <el-input
                    type="textarea"
                    v-model="refuseReason"
                    style="width:100%!important"
                  >
                  </el-input>
                </el-col>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="stopRefusal = false">取 消</el-button>
              <el-button type="primary" @click="stop">确 定</el-button>
            </div>
          </el-dialog>

          <div class="pagination">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChangePage"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
  import bedChangeApi from '../../service/member/bedChangeApi'
  import commonApi from '../../service/member/commonApi';
  export default {
    methods: {
      init(){
        this.loadTableData();
        this.getProcessProgress();
      },
      /**
       * 选择项目
       */
      selectItem(){
        //清空选项
        this.queryData.memberName = '';
        this.queryData.dateApplication = [];
        this.queryData.dateApplicationStart = '';
        this.queryData.dateApplicationEnd = '';
        this.queryData.taskKey = '';
      },
      /**
       * 清空按钮触发
       */
      clearItem(){
        this.selectItem();
      },
      loadTableData(){
        this.currentPage = 1;
        this.query();
      },
      /**
       * 获取办理进度种类
       */
      getProcessProgress(){
        bedChangeApi.getMemberBedChangeTaskKeyList().then(
          (response)=>{
            this.taskKeys = response.data.data;
          }
        );
      },
      /**
       * 查询
       */
      query(){
        let self = this;
        if(self.currentFileId == 2) {
          self.queryData.dateApplicationStart = self.queryData.dateApplication[0];
          self.queryData.dateApplicationEnd = self.queryData.dateApplication[1];
        }
        self.queryData.actType = 2;
        bedChangeApi.queryMemberBedChangeResultDTOList(10,self.currentPage,self.queryData).then(
          (response)=>{
          self.tableData = response.body.data.list;
            if (!response.data.data.total) {
              self.total = 1;
            } else {
              self.total = response.body.data.total;
            }
            ;
            self.reduction();
          }
        );
      },
      /**
       * 还原表格字段
       */
      reduction(){
        let self = this;
        for (let i = 0; i < self.tableData.length; i++) {
          var data = self.tableData[i];
          data.taskName = data.taskNameArr[0];
          if (data.gender == "0") {
            data.gender = "男";
          } else {
            data.gender = "女";
          }
          if(data.dateApplication.length > 16){
            data.dateApplication = data.dateApplication.substring(0,16);
          }
          data.taskKey = '';
          if (data.taskNameArr.length > 0) {
            data.taskNameArr.forEach(function (key) {
              data.taskKey += key+"/";
            });
          }
          if(data.taskKey){
            data.taskKey = data.taskKey.substring(0,data.taskKey.length-1);
          }

//          data.remark = '';
//          if (data.remarkArr.length > 0) {
//            data.remarkArr.forEach(function (key) {
//              if(key){
//                data.remark += key;
//              }
//            });
//          }
        }
      },
      /**
       * 继续
       */
      goOn(row){
        if(row.taskKeyArr[0]=='bedChange_affirm'){
          this.$router.push({name:"changeBed03",params:{memberObj:row}});
        }else{
          this.$router.push({name:"changeBed02",params:{memberObj:row}});
        }
      },
      /**
       * 中止
       */
      stopBtn(memberObj){
        this.currentMemberObj = {};
        this.currentMemberObj = memberObj;
        this.stopRefusal = true;
      },
      stop(){
        this.stopRefusal = false;
        commonApi.abortProcess(this.currentMemberObj.actId,this.refuseReason).then(response => {
          this.refuseReason="";
          if(response.data.status==200){
            this.$message({
              type: 'success',
              message: '终止成功!'
            });
            this.loadTableData();
          }else{
            this.$message({
              type: 'success',
              message: '终止失败!'
            })
          }
        })
      },
      /**
       * 备注(操作)
       */
      remark(row){
        let self = this;
        self.comment = row.remark;
        self.actId = row.actId;
        self.noteBox=true;
      },
      /**
       * 备注确认
       */
      noteQuery(){
        let self = this;
        commonApi.getRemark(self.actId,self.comment).then(
          (response)=>{
          self.$message({
          message: '添加备注成功',
          type: 'success'
        });
        self.noteBox=false;
        self.loadTableData();
      }
      );
      },
      /**
       * 换床申请
       */
      changeBedApplication(){
        this.$router.push({name:"changeBed01"});
      },
      /**
       * 获取会员的流程进度
       */
//      getScheduleData(row){
//        let self = this;
//        self.schedule = true;
//        commonApi.getMemberStepResult(row.actId).then(function (response) {
//          self.scheduleData =  response.body.data;
////          self.scheduleLength = self.scheduleData.length;
//          self.scheduleData = {};
//          if(self.data.step){
//            var keys = Object.keys(self.data.step);
//            if(keys){
//              keys.forEach(function(e){
//                self.scheduleData[e.toString().substring(0,16).replace("T"," ")] = self.data.step[e];
//              });
//            }
//          }
//        })
//      },

      /**
       * 获取会员的换床流程进度
       */
      getScheduleData(row){
        let self = this;
        self.schedule = true;
        commonApi.getMemberStepResult(row.actId).then(function (response) {
          self.data =  response.body.data;
          self.scheduleData = {};
          if(self.data.step){
            var keys = Object.keys(self.data.step);
            if(keys){
              keys.forEach(function(e){
                self.scheduleData[e.toString().substring(0,16).replace("T"," ")] = self.data.step[e];
              });
            }
          }
        })
      },
      /**
       * 分页相关
       */
      handleSizeChange(val) {
//        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
//        console.log(`当前页: ${val}`);
        this.query();
      },
    },
    mounted: function () {
      this.init();
    },
    data() {
      return {
        noteBox:false,
        comment:'',
        actId:null,
        leaveDate: "",
        leave: false,
        isOperation: true,
        currentFileId: 1,
        currentMemberObj:{},
        stopRefusal:false,
        refuseReason: '',
        schedule:false,
        scheduleLength:0,
        scheduleData:{
//          "2017-11-14":"嬴政（会员NO. 110）申请退住，待分管院长审",
//          "2017-11-15":"分管院长同意申请，待总院长审核",
//          "2017-11-16":"总院长同意申请，待财务结算",
        },
        fileId:'',
        applicationTime:'',
        memberProcess:{
          memberId: null,
          runId: ""
        },
        queryData:{
          dateApplicationEnd: "",
          dateApplicationStart: "",
          dateApplication: "",
          memberName: "",
          taskKey: ""
        },
        fileList:[{
          fileId: 1,
          fileName: "会员姓名"
        },{
          fileId: 2,
          fileName: "申请时间",
        },{
          fileId: 3,
          fileName: "办理进度",
        }],
        processOptions:[],
        tableData: [],
        total:0,
        currentPage: 1,
      }
    },

  }
</script>
<style>

  .input .btns{
    float:none!important;
    display:inline-block;
  }
  .el-input{
    width: 80%;
  }
  .input input{
    display: inline-block;
  }
  .el-pagination{
    margin-right:0!important;
    padding-right:0!important;
  }
  .el-select {
    display: block;
    position: relative;
  }
</style>


